<template>
	<view class="header-box">
		<u-popup :show="show" @close="show = false" mode="center" round="15rpx">
			<view class="slot-content">
        <Welcome class="welcome"></Welcome>
				<!-- <iframe src="https://www.omlook.com/h5/#/pages/Welcome/Welcome" class="iframe" frameborder="0" align="middle">
				</iframe> -->
				<view class="close-icon">
					<i class="iconfont icon-close" @click="show = false"></i>
				</view>
			</view>
		</u-popup>
		<!-- <u-modal :show="show" confirmColor="#61BDB2" :showConfirmButton="false" @confirm="()=>{show = false}" :confirmText="$t('index.Close')" width="550rpx">
      <view class="slot-content" >
        <iframe
          src="https://www.omlook.com/h5/#/pages/Welcome/Welcome"
          class="iframe"
          frameborder="0"
          align="middle"
        >
        </iframe>
				<view class="close-icon">
					<i class="iconfont icon-close"></i>
				</view>
      </view>
    </u-modal> -->
		<navbar-module :title="$t('discover.make-friends')" @showBubbleBox="showBubbleBox" :type="1" :showSearch="false" />
		<!-- 头部tab栏 -->
		<view class="search-box">
			<view class="search-top">
				<view class="search-left">
					<view class="search-item">{{ $t('dating.Purpose') }}:</view>
					<view class="search-item">{{ $t('dating.City') }}:</view>
					<view class="search-item">{{ $t('dating.ageRange') }}:</view>
					<view class="search-item" v-if="isShowMore">{{ $t('dating.Country') }}:</view>
					<view class="search-item" v-if="isShowMore">{{ $t('dating.Gender') }}:</view>
				</view>
				<view class="search-right">
					<view class="search-item">
						<view class="input-box" @click="tagShow = true">
							<view class="omit">
								{{ !searchForm.labelId ? $t('feeServices.allTag') : labelList[labelList.findIndex(e => e.labelId == searchForm.labelId)].labelNameNow }}
							</view>
							<u-icon name="arrow-down" color="#000000" size="12"></u-icon>
						</view>
					</view>
					<view class="search-item">
						<view class="input-box">
							<regionSelect :cityValue.sync="location" :countryIosCode="countryIosCode" ref="regionSelectCascader">
							</regionSelect>
							<u-icon name="arrow-down" color="#000000" size="12"
								@click="$refs.regionSelectCascader.show = true"></u-icon>
						</view>
					</view>
					<view class="search-item">
						<view class="two-box">
							<view class="input-box">
								<input v-model="searchForm.ageFirst" class="input-style" :maxlength="5" type="number" />
							</view>
							<view class="search-line"></view>
							<view class="input-box">
								<input v-model="searchForm.ageLast" class="input-style" :maxlength="5" type="number" />
							</view>
						</view>
					</view>
					<view class="search-item" v-if="isShowMore">
						<view class="input-box" @click="countryShow = true">
							<view>
								{{ countryIosCode == 'RU' ? $t('tarding.Russia') : countryIosCode == 'CN' ? $t('tarding.China') : $t('feeServices.allTag') }}
							</view>
							<u-icon name="arrow-down" color="#000000" size="12"></u-icon>
						</view>
					</view>
					<view class="search-item" v-if="isShowMore">
						<view class="input-box" @click="genderShow = true">
							<view>
								{{ searchForm.gender == 1 ? $t('dating.Male') : searchForm.gender == 2 ? $t('dating.Female') : $t('feeServices.allTag') }}
							</view>
							<u-icon name="arrow-down" color="#000000" size="12"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<view class="search-bottom">
				<view class="btn-reset" @click="resetSearch">{{ $t('dating.reset') }}</view>
				<u-button class="btn-search" @click="handleFriendList('search')">{{ $t('feeServices.search') }}</u-button>
				<view class="btn-more" @click="isShowMore = !isShowMore">
					{{ isShowMore ? $t('dating.fold') : $t('dating.more') }}
					<u-icon name="arrow-up" color="#61BDB2" size="12" v-if="isShowMore" style="margin-left: 10rpx;"></u-icon>
					<u-icon name="arrow-down" color="#61BDB2" size="12" v-else
						style="margin-left: 10rpx; margin-top: 4rpx;"></u-icon>
				</view>
			</view>
		</view>
		<view class="user-container" v-if="friendList && friendList.length > 0">
			<view class="user-container-left" v-for="(item, index) in friendList" :key="index">
				<view class="user-item" @click="gotoFriendPage(item)">
					<image :src="item.avatarCompress || item.avatar" mode="aspectFill" class="user-photo"></image>
					<view class="user-wrapper">
						<view class="user-name omit">
							{{ item.userName }}
						</view>
						<view class="user-subname omit">
							{{ item.country ? getCountryName(JSON.parse(item.country)) : '' }}{{ item.country ? "," : '' }}{{ item.region ? getRegionNameList(JSON.parse(item.region)).join(',') : '' }}
						</view>
						<view class="user-line"></view>
						<view class="info__link">
							<view v-for="(label, index1) in item.labelList" :key="index1">
								<view class="link-text omit" v-if="index1 < 3">#{{ getLabelLangType(label) }}</view>
							</view>
						</view>
						<view class="user-lastTime" v-if="item.lastTime">
							<view class="dot"></view>
							<view class="text omit">{{ time(item.lastTime) }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-empty v-else :text="$t('dating.EmptyDataList')" textColor="#878787" textSize="14" width="104" height="100"
			marginTop="80" icon="/static/image/bourse/none_order.png">
		</u-empty>
		<SidebarModule :show="showSidebar" @closeSidebar="handleCloseSidebar" />
		<!-- 选择性别 -->
		<u-picker :closeOnClickOverlay="true" @close="genderShow = false" :show="genderShow" ref="uPickerGender" :columns="[genderColumns]" @confirm="confirmGender" keyName="label"
			@cancel="genderShow = false" :cancelText="$t('cancel')" :confirmText="$t('confirm')"></u-picker>
		<!-- 选择国家 -->
		<u-picker :closeOnClickOverlay="true" @close="countryShow = false" :show="countryShow" ref="uPickerCountry" :columns="[countryColumns]" @confirm="confirmCountry"
			keyName="label" @cancel="countryShow = false" :cancelText="$t('cancel')" :confirmText="$t('confirm')"></u-picker>
		<!-- 选择约会目的 -->
		<u-picker :closeOnClickOverlay="true" @close="tagShow = false" :show="tagShow" ref="uPickerLabel" :columns="[labelList]" @confirm="confirmLabel" keyName="labelNameNow"
			@cancel="tagShow = false" :cancelText="$t('cancel')" :confirmText="$t('confirm')"></u-picker>
	</view>
</template>

<script>
	import {
		queryJYUserPersonalsList,
		queryLabelList,
		personFriendInfo,
	} from "@/services/makeFriend";
	import NavbarModule from "../../components/NavbarModule.vue";
	import Welcome from "@/components/Welcome.vue";
	import {
		mapState
	} from "vuex";
	import SidebarModule from "../../components/SidebarModule.vue";
	import regionSelect from "./components/regionSelect.vue";
	import {
		getTimeDiff
	} from "@/utils/index";
	export default {
		name: "MakeFriends",
		components: {
			NavbarModule,
			SidebarModule,
			regionSelect,
      Welcome
		},
		data() {
			return {
				webviewStyles: {
					width: '200px',
					height: '400px',
				},
				show: false,
				language: "",
				showSidebar: false,
				labelList: [],
				currentIndex: 0,
				friendList: [],
				Dating: "Dating",
				aleardyEdit: {},
				searchForm: {
					pageSize: 10,
					pageNum: 1,
					// labelName: null,
					labelId: null,
					ageFirst: 18,
					ageLast: 75,
					gender: null,
					country: null,
					region: null
				},
				total: 0,
				isShowMore: false,
				genderShow: false,
				countryShow: false,
				tagShow: false,
				countryIosCode: '',
				genderColumns: [{
						label: this.$t('feeServices.allTag'),
						value: null,
					},
					{
						label: this.$t('dating.Male'),
						value: 1,
					},
					{
						label: this.$t('dating.Female'),
						value: 2,
					},
				],
				countryColumns: [{
						label: this.$t('feeServices.allTag'),
						value: null,
					},
					{
						label: this.$t('tarding.Russia'),
						value: 'RU',
					},
					{
						label: this.$t('tarding.China'),
						value: 'CN',
					},
				],
				location: []
			};
		},
		watch: {
			language: {
				handler(newName, oldName) {
					this.location = []
					this.genderColumns = [{
							label: this.$t('feeServices.allTag'),
							value: null,
						},
						{
							label: this.$t('dating.Male'),
							value: 1,
						},
						{
							label: this.$t('dating.Female'),
							value: 2,
						},
					]
					this.countryColumns = [{
							label: this.$t('feeServices.allTag'),
							value: null,
						},
						{
							label: this.$t('tarding.Russia'),
							value: 'RU',
						},
						{
							label: this.$t('tarding.China'),
							value: 'CN',
						},
					]
					return uni.getLocale()
				},
				immediate: true
			}
		},
		computed: {
			...mapState(["userInfo", "token", "rongToken"]),
		},
		methods: {
			time(value) {
				return getTimeDiff(value, "minutes", true);
			},
			// 回调参数为包含columnIndex、value、values
			confirmGender(e) {
				this.searchForm.gender = e.value[0].value
				this.genderShow = false;
			},
			confirmCountry(e) {
				this.countryIosCode = e.value[0].value
				this.countryShow = false;
			},
			confirmLabel(e) {
				this.searchForm.labelId = e.value[0].labelId
				this.tagShow = false;
			},
			changeTag(e) {
				this.searchForm.labelId = e.labelId
				this.handleFriendList()
			},
			getLabelLangType(obj) {
				if (this.language === "zh-Hans") {
					return obj.label.cn;
				} else if (this.language === "en") {
					return obj.label.en;
				} else if (this.language === "ru") {
					return obj.label.ru;
				}
			},
			// 侧边栏
			handleShowSidebar() {
				this.showSidebar = true;
			},
			handleCloseSidebar() {
				this.showSidebar = false;
			},
			// 返回上一页
			back() {
				uni.navigateBack();
			},
			gotoFriendPage(item) {
				console.log(item);
				uni.navigateTo({
					url: `/pages/makefriends/PersonalHomepage?userPersonalsId=${item.userPersonalsId}`,
				});
			},
			resetSearch() {
				this.location = []
				this.countryIosCode = ''
				this.searchForm = {
					pageSize: 10,
					pageNum: 1,
					// labelName: null,
					labelId: null,
					ageFirst: 18,
					ageLast: 75,
					gender: null,
					country: null,
					region: null
				}
				this.handleFriendList()
			},
			//获取交友标签列表
			async handleLableList() {
				const resp = await queryLabelList({
					language: "zh-Hans"
				});
				if (!resp.success) return;
				let list = resp.result.data.map((item) => {
					item.label = JSON.parse(item.labelName);
					return {
						...item,
						labelNameNow: this.getLabelLangType(item),
					};
				}).reverse();
				list = [{
						labelId: null,
						labelNameNow: this.$t('feeServices.allTag')
					},
					...list
				]
				this.labelList = list
			},
			//获取交友列表
			async handleFriendList(type) {
				if (Number(this.searchForm.ageFirst) > Number(this.searchForm.ageLast)) {
					let age = this.searchForm.ageLast
					this.searchForm.ageLast = this.searchForm.ageFirst
					this.searchForm.ageFirst = age
				}
				this.searchForm.region = this.location && this.location.length > 0 ? this.location.join(',') : null
				this.searchForm.country = this.countryIosCode == 'RU' ? this.$t('tarding.Russia') : this.countryIosCode ==
					'CN' ? this.$t('tarding.China') : null
				if (type === 'search') {
					this.searchForm.pageNum = 1
				}
				let option = this.searchForm
				for (var key in option) {
					if ((!option[key] && String(option[key]) != '0')) {
						delete option[key];
					}
				}
				const resp = await queryJYUserPersonalsList(option);
				uni.stopPullDownRefresh();
				if (!resp.success) return;
				this.total = resp.result.total
				let list = resp.result.rows.map((item) => {
					item.labelList = !item.userLabelAppList ? [] :
						item.userLabelAppList.map((item1) => {
							return {
								...item1,
								label: JSON.parse(item1.labelName),
							};
						});
					// item.region = item.region ? this.getRegionNameList(JSON.parse(item.region)).join(',') : null
					// item.country = item.country ? this.getCountryName(JSON.parse(item.country)) : null
					item = this.changeAvatarPic(item)
					return item;
				});
				this.friendList = this.searchForm.pageNum == 1 ? list : [...this.friendList, ...list]
			},
			//编辑页
			showBubbleBox() {
				if (this.token) {
					if (!this.aleardyEdit.userPersonalsId) {
						uni.navigateTo({
							url: "/pagesDiscover/friendsInformation/EditData",
						});
					} else {
						// console.log('this.aleardyEdit',this.aleardyEdit)
						uni.navigateTo({
							url: `/pagesDiscover/friendsInformation/FriendsInformation`,
						});
					}
				} else {
					uni.navigateTo({
						url: "/pages/login/Login",
					});
				}
			},
			//查是否发布过资料
			async handleReleaseInfo() {
				const resp = await personFriendInfo({
					userId: this.userInfo.userId
				});
				if (!resp.success) return;
				this.aleardyEdit = this.changeAvatarPic(resp.result.data);
				if (this.aleardyEdit.userPersonalsId) {
					this.$store.state.friendsInformation = this.aleardyEdit;
				}
			},
		},
		onShow() {
			this.language = uni.getLocale();
			if (!uni.getStorageSync('welcomeShow')) {
				this.show = true
				uni.setStorageSync('welcomeShow', 'welcomeShow')
			}
			this.handleLableList();
			if (this.token) {
				this.handleReleaseInfo();
			}
		},
		onLoad() {
			this.handleFriendList();
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.handleLableList()
			this.friendList = []
			this.total = 0
			this.handleFriendList('search')
			if (this.token) {
				this.handleReleaseInfo();
			}
		},
		onReachBottom() {
			if (this.total > this.searchForm.pageNum * this.searchForm.pageSize) {
				this.searchForm.pageNum++;
				this.handleFriendList();
			}
		},
	};
</script>

<style lang="scss" scoped>
	.slot-content {
		border-radius: 15rpx;
		overflow: hidden;
	}

	.welcome {
		width: 620rpx;
		height: 520rpx;
		border: 0;
    &::v-deep{
      .content {
        width: 100%;
        height: 100%;
      }
    }
	}

	.close-icon {
		position: absolute;
		display: flex;
		justify-content: center;
		align-items: center;
		top: -96rpx;
		right: -30rpx;
		width: 48rpx;
		height: 48rpx;
		border-radius: 50%;
		border: 2rpx solid #d5d5d5;
		color: #d5d5d5;

		.icon-close {
			font-size: 48rpx;
			vertical-align: middle;
		}
	}

	.omit {
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		line-clamp: 1;
		-webkit-box-orient: vertical;
		word-wrap: break-word;
		white-space: pre-wrap;
		word-break: break-all;
	}

	.header-box {
		box-sizing: border-box;
		padding: 0 30rpx 0;

		.search-box {
			width: 100%;
			margin-top: 20rpx;
			height: fit-content;
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 30rpx;
			box-sizing: border-box;

			.search-top {
				width: 100%;
				display: flex;

				.search-item {
					height: 60rpx;
					margin-bottom: 24rpx;
					display: flex;
					align-items: center;
				}

				.search-left {
					width: fit-content;
					font-size: 24rpx;
					// font-family: Source Han Sans CN;
					font-weight: 400;
					color: #000000;
					white-space: nowrap;
					margin-right: 26rpx;
				}

				.search-right {
					flex: 1;

					.two-box {
						width: 100%;
						height: 100%;
						display: flex;
						align-items: center;

						.search-line {
							width: 7rpx;
							height: 2rpx;
							background: #000000;
							margin: 0rpx 16rpx;
						}
					}

					.input-box {
						flex: 1;
						height: 100%;
						background: #F6F6F6;
						border: 1rpx solid #D7D7D7;
						padding: 0rpx 20rpx;
						border-radius: 10rpx;
						box-sizing: border-box;
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-size: 24rpx;
						// font-family: Source Han Sans CN;
						font-weight: 400;
						color: #000000;

						.input-style {
							font-size: 24rpx;
							// font-family: Source Han Sans CN;
							font-weight: 400;
							color: #000000;
						}
					}
				}
			}

			.search-bottom {
				width: 100%;
				display: flex;
				font-size: 24rpx;
				// font-family: Source Han Sans CN;
				font-weight: 400;

				.btn-reset {
					width: fit-content;
					min-width: 240rpx;
					height: 60rpx;
					background: #FFFFFF;
					border: 1rpx solid #61BDB2;
					border-radius: 10rpx;
					box-sizing: border-box;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #61BDB2;
				}

				.btn-search {
					width: fit-content;
					min-width: 240rpx;
					height: 60rpx;
					background: #61BDB2;
					border-radius: 10rpx;
					text-align: center;
					line-height: 60rpx;
					color: #FFFFFF;
					margin-left: 20rpx;
					border: unset;
				}

				.btn-more {
					margin-left: auto;
					display: flex;
					align-items: center;
					color: #61BDB2;
				}
			}
		}

		.user-container {
			display: flex;
			padding: 20rpx 0 0;
			align-items: flex-start;
			flex-wrap: wrap;
			justify-content: space-between;

			.user-container-left {
				width: 100%;
			}

			.user-item {
				width: 100%;
				height: fit-content;
				background: #ffffff;
				border-radius: 20rpx;
				margin-bottom: 20rpx;
				padding: 20rpx;
				display: flex;
				box-sizing: border-box;

				.user-wrapper {
					flex: 1;
					margin-left: 30rpx;
					height: 260rpx;
					display: flex;
					flex-direction: column;
				}

				.user-photo {
					border-radius: 20rpx;
					width: 260rpx;
					height: 260rpx;
				}

				.user-name {
					width: 100%;
					font-size: 28rpx;
					// font-family: Source Han Sans CN;
					font-weight: 500;
					color: #000000;
					line-height: 48rpx;
				}

				.user-subname {
					margin-top: 4rpx;
					font-size: 24rpx;
					// font-family: Source Han Sans CN;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.4);
				}

				.user-line {
					width: 100%;
					height: 2rpx;
					background: #EFEFEF;
					margin: 16rpx 0rpx;
				}

				.info__link {
					flex-grow: 1;

					.link-text {
						height: 38rpx;
						font-size: 24rpx;
						// font-family: Source Han Sans CN;
						font-weight: 400;
						color: #61BDB2;
					}
				}

				.user-lastTime {
					width: 100%;
					height: 24rpx;
					display: flex;
					align-items: center;
					font-size: 20rpx;
					// font-family: Source Han Sans CN;
					font-weight: 400;
					color: #878787;

					.dot {
						width: 8rpx;
						height: 8rpx;
						background: #878787;
						border-radius: 50%;
						margin-right: 8rpx;
					}

					.text {
						margin-left: -24rpx;
						transform: scale(0.84);
					}
				}
			}
		}
	}
</style>